<template>
    <div class="app">
<!--      付款方-->
      <h1>{{msg}},学生姓名是{{studentName}}</h1>
<!--  自定义事件（第一种写法）  通过父组件给子组件传递函数类型的props实现：子给父传递数据-->
<!--     <Student v-on:atguigu="getStudentName"></Student>-->
<!--     第二种写法 ref-->
<!--      若不写native则直接认为是自定义事件-->
      <student ref="student" @click.native="show"></student>
<hr>
      <school :getSchoolName="getSchoolName"></school>
    </div>
</template>

<script>
import Student from "@/components/Student";
import School from "@/components/School";

export default {
  name: "App",
  data(){
    return {
      msg:'你好啊',
      studentName: '',
    }
  },
  components:{
    // eslint-disable-next-line vue/no-unused-components
    Student,
    School
  },
  methods:{
    getSchoolName(name){
      console.log('APP收到了学校姓名',name)
    },
    getStudentName(name,...parms){
      console.log('APP收到了学生姓名',name,parms)
      this.studentName = name
    },
    show(){
      alert(123)
    }

  },
  mounted() {
    //.$on()绑定自定义事件             后面还能设置定时器，几秒获取
     this.$refs.student.$on('atguigu',this.getStudentName)
    //只能触发一次
    // this.$refs.student.$once('atguigu',this.getStudentName)
    // this.$refs.student.$on('atguigu',function (name){
    //   console.log('APP收到了学生姓名',name)
    //   this.studentName = name
    //   console.log(this) // 此时this为student组件对象，但写成箭头函数是app实例对象
    // })
  },

}
</script>

<style >
  .app{
    background-color: gray;
    margin-top: 10px;
  }
</style>